//全局变量/常量
let drawCircle = null //事件查询画笔
const queried = [] //表格数据, 分页时使用
const pageSize = 4 //表格每页最多数据记录
let hotFeatures //热力图要素数据
let eventmonthEcharts //按月份echarts数据
let eventType //事件类型  {碰撞:2,着火:5,...}
let eventTypeEcharts //事件类型图表数据  [{value:2, name:'碰撞'},{value:5, name:'着火'}]
let eventLevel //事件等级   {轻微事故:1,严重事故:3,....}
let eventLevelEcharts //事件等级图表数据  [{value:1, name:'轻微事故'},...]

/** pseudocode
 * 根据输入框的文字进行属性查询,
 * 将查询到的点绘制成openlayer点对象(设置几何,属性,样式)
 * 并添加到事件查询图层数据源
 * @param {object} type 当前的用户类型
 * @param {object} eventSource 事件查询图层数据源
 * @returns
 */
function eventQueryByKeyword(type, eventSource) {
  //判断当前事件图层是否有要素数据
  if (eventSource.revision_) {
    eventSource.clear()
  }
  //获取关键字
  const keywords = $('#search_keywords').val()
  if (!keywords) {
    alert('请输入事件查询关键字')
    return
  }
  //新建查询
  const query_sql = new Query({
    service: 'smart-city',
    layerID: '3',
  })
  const sql = `事件类型 LIKE '%${keywords}%' OR 发生地点 LIKE '%${keywords}%' OR 处理状态 LIKE '${keywords}'`
  query_sql.queryBySQL(sql, (result) => {
    if (result.TotalCount == 0) return alert('没有查询到相应事故')
    const data = result.SFEleArray
    //console.log(result)
    //获取查询的mapGIS点对象
    if (type == 'user') {
      data.forEach((element) => {
        //创建openlayer点对象, 设置属性
        const eventFeature = new ol.Feature({
          geometry: new ol.geom.Point([element.bound.xmin, element.bound.ymin]),
          event_type: element.AttValue[1],
          event_level: element.AttValue[2],
          event_time: element.AttValue[3],
          event_spot: element.AttValue[4],
        })
        eventSource.addFeature(eventFeature)
      })
    } else {
      data.forEach((element) => {
        //创建openlayer点对象, 设置属性
        const eventFeature = new ol.Feature({
          geometry: new ol.geom.Point([element.bound.xmin, element.bound.ymin]),
          event_type: element.AttValue[1],
          event_level: element.AttValue[2],
          event_time: element.AttValue[3],
          event_spot: element.AttValue[4],
          event_car: element.AttValue[5],
          event_driver: element.AttValue[6],
          event_condition: element.AttValue[7],
        })
        eventSource.addFeature(eventFeature)
      })
    }
  })
  //阻止提交表单时页面自动刷新
  return false
}

//清除按属性查询查询
function eventQueryClear(eventSource) {
  eventSource.clear()
  $('#search_keywords').val('')
}

/**
 * 根据几何查询 pseudocode(点击查询)
 * 1. 创建交互式圆画笔
 * 2. 获取绘制的圆几何, 调用中地接口, 查询圆几何范围内的事件要素
 * 3. 将查询到的事件要素动态渲染到底栏数据容器, 分页
 * 4. 添加热力图图层
 * 5. 对查询到事件要素进行统计分析,
 * @param {object} eventSource 绘制查询到的事件要素
 * @param {object} source 画布, 绘制查询几何
 */
function eventQueryByGeom(eventSource, source, map) {
  if (drawLine) {
    map.removeInteraction(drawLine)
  }
  source.clear()
  eventSource.clear()
  heatmapSource.clear()
  // if (drawCircle) {
  //   drawCircle = null
  //   map.removeInteraction(drawCircle)
  //   return
  // }
  //解绑地图的点击监听
  map.un('click', addPopup)
  //创建并添加圆画笔
  drawCircle = createDraw(source, 'Circle', eventDrawend)
  map.addInteraction(drawCircle)
}

/**
 * 绘制结束的回调,
 * 根据绘制的圆几何调用中地几何查询的接口
 * 重新封装了几何查询的函数, 增加了类型判断, 可支持拉框和画圆查询
 * @param {object} e 交互式画笔绘制的圆要素对象
 */
function eventDrawend(e) {
  //拿到交互式绘制的矩形几何信息openlayer
  const geom = e.feature.getGeometry()
  //实例化一个mapGIS的面要素
  const circle_query = new Query({
    service: 'smart-city', //数据服务名
    layerID: '3', //要查询的事件图层
  })
  //调用圆的查询
  circle_query.queryByGeom(geom, queryEventSuccess, 'Circle')
}

/**
 * 几何查询成功的回调
 * 1. 将查询到的记录绘制到地图上
 * 2. 将查询的记录属性值存入全局变量queried, 方便分页查询
 * 3. 根据查询到的记录总数动态渲染分页器
 * 4. 初始在表格中显示前四条记录
 * 5. 存储热力图数据
 * 6. 存储图表数据
 * @param {object} result mapgis要素对象
 * @return {object} result
 */
function queryEventSuccess(result) {
  map.on('click', addPopup)
  map.removeInteraction(drawCircle)
  drawCircle = null
  //console.log(result)

  //清空table非表头的数据行
  $('#footer-table').children().not(':first').remove()
  //清除分页器的li节点
  $('#footer-pagination').empty()
  //默认显示table的tab标签
  $('#myTab a[href="#home"]').tab('show')
  //清空echarts图表数据
  eventmonthEcharts = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] //按月份echarts数据
  eventType = {}
  eventTypeEcharts = []
  eventLevel = {}
  eventLevelEcharts = []

  if (!result.TotalCount) {
    alert('此区域没有交通事故')
    source.clear()
    return
  }

  //清空上次查询到的事件记录数组
  queried.splice(0, queried.length)

  const data = result.SFEleArray

  //设置热力图层的要素数据
  const format = new Zondy.Format.PolygonJSON()
  hotFeatures = format.read(result)
  //设置要素权值
  for (let i = 0; i < hotFeatures.length; i++) {
    hotFeatures[i].set('weight', parseFloat(data[i].AttValue[2]) * 0.2)
  }

  //将数据放到地图数据源eventSource
  data.forEach((element) => {
    //创建openlayer点对象, 设置属性
    const eventFeature = new ol.Feature({
      geometry: new ol.geom.Point([element.bound.xmin, element.bound.ymin]),
      event_type: element.AttValue[1],
      event_level: element.AttValue[2],
      event_time: element.AttValue[3],
      event_spot: element.AttValue[4],
      event_car: element.AttValue[5],
      event_driver: element.AttValue[6],
      event_condition: element.AttValue[7],
    })
    eventSource.addFeature(eventFeature)

    //将等级转换为文字
    switch (element.AttValue[2]) {
      case '1':
        element.AttValue[2] = '轻微事故'
        break
      case '2':
        element.AttValue[2] = '中等事故'
        break
      case '3':
        element.AttValue[2] = '严重事故'
        break
      case '4':
        element.AttValue[2] = '超大事故'
        break
    }
    switch (element.AttValue[7]) {
      case '0':
        element.AttValue[7] = '已处理'
        break
      case '1':
        element.AttValue[7] = '处理中'
        break
      case '2':
        element.AttValue[7] = '待处理'
        break
    }
    //将查询到的数据存入数组
    queried.push(element.AttValue.slice(1, 8))
    //默认在表格中显示前四条数据
    if (data.indexOf(element) < pageSize) {
      //将每个点数据的属性值添加到footer-table
      const list = `
    <tr>
      <td>${data.indexOf(element) + 1}</td>
      <td>${element.AttValue[1]}</td>
      <td>${element.AttValue[2]}</td>
      <td>${element.AttValue[3]}</td>
      <td>${element.AttValue[4]}</td>
      <td>${element.AttValue[5]}</td>
      <td>${element.AttValue[6]}</td>
      <td>${element.AttValue[7]}</td>
    </tr>
  `
      $('#footer-table').append(list)
    }

    //设置统计分析数据
    //按月份
    eventmonthEcharts[element.AttValue[3].split('.')[1] - 1]++
    //按事件类型
    let typeCount = eventType[element.AttValue[1]] //获取当前事件分类的个数
    if (!typeCount) {
      typeCount = 0
    }
    typeCount++
    eventType[element.AttValue[1]] = typeCount

    //按事件等级
    let levelCount = eventLevel[element.AttValue[2]] //获取当前事件等级的个数
    //初始还没这个等级时
    if (!levelCount) {
      levelCount = 0
    }
    levelCount++
    eventLevel[element.AttValue[2]] = levelCount
  })

  for (let key in eventType) {
    eventTypeEcharts.push({ value: eventType[key], name: key })
  }
  for (let key in eventLevel) {
    eventLevelEcharts.push({ value: eventLevel[key], name: key })
  }
  addEcharts()

  //显示footer容器
  $('#footer-event').removeClass('hide')
  //设置条目数
  $('#total').text(`共${queried.length}条`)
  //设置分页器的个数
  for (let i = 0; i < queried.length / pageSize; i++) {
    $('#footer-pagination').append(
      `<li><a href="#" onclick="toggleTable(${i + 1},queried,event)">${
        i + 1
      }</a></li>`
    )
  }
  //默认分页1处于激活
  $('#footer-pagination').children(':first').addClass('active')
  return result
}

/**
 * 分页器切换
 * 1. 计算偏移量
 * 2. 渲染表格数据
 * @param {number}} page 当前需要查询的页码
 * @param {array} 二维数组, 存储的事件查询字段属性值
 * @param {object} event 点击的分页器对象  li>a
 */
function toggleTable(page, queried, event) {
  //清除数据
  $('#footer-table').children().not(':first').remove()
  //计算偏移量
  const offset = (page - 1) * pageSize
  for (let i = offset; i < offset + pageSize; i++) {
    //数据为空时,跳出循环体
    if (!queried[i]) {
      break
    }
    const list = `
    <tr>
      <td>${i + 1}</td>
      <td>${queried[i][0]}</td>
      <td>${queried[i][1]}</td>
      <td>${queried[i][2]}</td>
      <td>${queried[i][3]}</td>
      <td>${queried[i][4]}</td>
      <td>${queried[i][5]}</td>
      <td>${queried[i][6]}</td>
    </tr>
  `
    $('#footer-table').append(list)
  }
  $(event.target).parent().addClass('active')
  $(event.target).parent().siblings().removeClass('active')
}

//关闭footer容器, 并清除事件查询相关图层
function closeFooter() {
  $('#footer-event').addClass('hide')
  eventSource.clear()
  source.clear()
  heatmapSource.clear()
}

//显示热力图
function addHotFeatures(heatmapSource) {
  heatmapSource.addFeatures(hotFeatures)
  // $('.collapse').collapse('toggle')
}

//统计分析, 根据用户选择的统计字段, 配置图表
function addEcharts() {
  //获取用户选择的统计字段
  const selected = $('#selection').find('option:selected').text()
  //初始化图表容器
  const myChart1 = echarts.init(document.querySelector('#echarts-1'))
  let option
  //设置图表数据
  if (selected == '事件等级') {
    option = {
      title: {
        text: '自定义区域事件等级统计',
        subtext: '事件等级',
        left: 'center',
      },
      tooltip: {
        trigger: 'item',
      },
      legend: {
        orient: 'vertical',
        left: 'auto',
      },
      series: [
        {
          name: 'EventLevel',
          type: 'pie',
          radius: '50%',
          data: eventLevelEcharts,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
        },
      ],
    }
  } else if (selected == '月份') {
    option = {
      title: {
        text: '自定义区域事件月份统计',
        subtext: '月份',
        left: 'center',
      },
      tooltip: {
        trigger: 'item',
      },
      xAxis: {
        type: 'category',
        data: [
          '1月',
          '2月',
          '3月',
          '4月',
          '5月',
          '6月',
          '7月',
          '8月',
          '9月',
          '10月',
          '11月',
          '12月',
        ],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          name: 'eventMonth',
          data: eventmonthEcharts,
          type: 'bar',
          showBackground: true,
          backgroundStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#83bff6' },
              { offset: 0.5, color: '#188df0' },
              { offset: 1, color: '#188df0' },
            ]),
          },
        },
      ],
    }
  } else {
    //设置默认及其他情况
    option = {
      title: {
        text: '自定义区域事件类型统计',
        subtext: '事件类型',
        left: 'center',
      },
      tooltip: {
        trigger: 'item',
      },
      legend: {
        orient: 'vertical',
        left: 'auto',
      },
      series: [
        {
          name: 'EventType',
          type: 'pie',
          radius: '50%',
          data: eventTypeEcharts,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
        },
      ],
    }
  }
  //第二个参数设置为true表示, 设置配置时不合并上次的配置, 默认是合并配置
  myChart1.setOption(option, true)
}

function toggleIcon(event) {
  if ($(event.target).parent().hasClass('collapsed')) {
    $('.card-link1 span').addClass('glyphicon-chevron-down')
    $('.card-link1 span').removeClass('glyphicon-chevron-up')
  } else {
    $('.card-link1 span').removeClass('glyphicon-chevron-down')
    $('.card-link1 span').addClass('glyphicon-chevron-up')
  }
}
